<script setup lang="ts">
import { useRouterStore, useUserStore } from '@/store';
import { isMobileTerminal } from '@/utils';
import { Navigation, List } from '@/views/main/components';
import { useScroll } from '@vueuse/core';
import { onActivated, useTemplateRef } from 'vue';
import { useRouter } from 'vue-router';

const userStore = useUserStore();
const routerStore = useRouterStore();
const router = useRouter();

const onVIPClick = () => {
  routerStore.changeRouterType('push');

  router.push('/member');
};
const onMineClick = () => {
  routerStore.changeRouterType('push');
  if (userStore.tokenGetter) {
    router.push('/profile');
  } else {
    router.push('/login');
  }
};

const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const { y: containerRefScrollY } = useScroll(containerRef);
onActivated(() => {
  if (containerRef.value) {
    containerRef.value.scrollTop = containerRefScrollY.value;
  }
});

defineOptions({ name: 'home' });
</script>

<template>
  <div
    class="scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent h-full overflow-auto bg-white duration-500 dark:bg-zinc-800"
    ref="containerRef"
  >
    <Navigation />
    <div class="relative m-1 mx-auto max-w-screen-xl xl:mt-4"><List /></div>
    <MTriggerMenu
      v-if="isMobileTerminal"
      class="fixed right-0 bottom-6 left-0 mx-auto w-[220px]"
    >
      <MTriggerMenuItem
        icon="home"
        to="/"
        iconClass="fill-zinc-400 dark:fill-zinc-500"
        textClass="text-zinc-400 dark:text-zinc-500"
      >
        首页
      </MTriggerMenuItem>
      <MTriggerMenuItem
        v-if="userStore.tokenGetter"
        icon="vip"
        to="/home"
        iconClass="fill-zinc-400 dark:fill-zinc-500"
        textClass="text-zinc-400 dark:text-zinc-500"
        @click="onVIPClick"
      >
        VIP
      </MTriggerMenuItem>
      <MTriggerMenuItem
        icon="profile"
        to="/home"
        iconClass="fill-zinc-400 dark:fill-zinc-500"
        textClass="text-zinc-400 dark:text-zinc-500"
        @click="onMineClick"
      >
        {{ userStore.tokenGetter ? '我的' : '去登录' }}
      </MTriggerMenuItem>
    </MTriggerMenu>
  </div>
</template>
